/**
* 基础菜单 商品管理
*/
<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>结算中心</el-breadcrumb-item>
		</el-breadcrumb>
		<br><br>
		<el-tabs type="border-card" @tab-click="getdata">
			<el-tab-pane label="全部">
				<el-form :inline="true" :model="formInline" class="user-search">
					<div class="block">
						<el-date-picker v-model="formInline.start" type="date" placeholder="选择日期"
							format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
						</el-date-picker>
					</div>
					<div class="block">
						<el-date-picker v-model="formInline.end" type="date" placeholder="选择日期"
							format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
						</el-date-picker>
					</div>

					<el-form-item label="">
						<el-select v-model="editForm.service_status" placeholder="支付状态">
							<el-option v-for="item in levelOptions" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
					</el-form-item>

				</el-form>
				<!--列表-->
				<el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
					element-loading-text="拼命加载中" style="width: 80%;">
					<el-table-column align="center" type="selection" width="60">
					</el-table-column>
					<el-table-column sortable prop="month" label="时间" width="200">
					</el-table-column>
					<el-table-column sortable prop="money" label="服务费" width="200">
					</el-table-column>
					<el-table-column sortable prop="plan_time" label="截至支付时间" width="200">
					</el-table-column>
					<el-table-column sortable prop="pay_time" label="实际支付时间" width="200">
					</el-table-column>
					<el-table-column sortable prop="status" label="支付状态" width="200">
					</el-table-column>
					<el-table-column align="center" label="操作" min-width="200">
						<template slot-scope="scope">
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="danger"
								v-if="show1(scope.row)">支付
							</el-button>
							<el-button type="infor" @click="details(scope.$index, scope.row)">详情</el-button>
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页组件 -->
				<Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
				<!-- 详情页面 ---------------------------------------------------------------------------------------------------------->


				<el-dialog title="提示" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
					<el-form label-width="150px" :model="editForm" :rules="rules" ref="editForm">
						<el-form-item label="需要支付的服务费" prop="service">
							<el-input size="small" v-model="editForm.service" auto-complete="off" placeholder="需要支付的服务费"
								readonly>
							</el-input>
						</el-form-item>
						<el-form-item label="操作的金额" prop="money">
							<el-input size="small" v-model="editForm.money" auto-complete="off" placeholder="操作的金额"
								readonly>
							</el-input>

						</el-form-item>
						<el-form-item label="计划还款时间" prop="deadline">
							<el-input size="small" v-model="editForm.deadline" auto-complete="off" placeholder="计划还款时间"
								readonly>
							</el-input>

						</el-form-item>
						<el-form-item label="实际还款时间" prop="service">
							<el-input size="small" v-model="editForm.repay_time" auto-complete="off"
								placeholder="实际还款时间" readonly>
							</el-input>

						</el-form-item>
						<el-form-item label="支付状态" prop="service_status">
							<el-input size="small" v-model="editForm.service_status" auto-complete="off"
								placeholder="支付状态" readonly>
							</el-input>

						</el-form-item>
					</el-form>

					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
					</span>
				</el-dialog>


				<!-- 支付页面 -->
				<el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
					<el-form label-width="150px" :model="editForm" :rules="rules" ref="editForm">
						<el-form-item label="需要支付的服务费" prop="money">
							<el-input size="small" v-model="editForm.money" auto-complete="off" placeholder="需要支付的服务费"
								readonly>
							</el-input>
						</el-form-item>
						<el-form-item label="支付密码" prop="password">
							<el-input placeholder="请输入密码" v-model="editForm.password" show-password></el-input>
							<span></span>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="closeDialog">取消</el-button>
						<el-button size="small" type="primary" :loading="loading" class="title"
							@click="submitForm('editForm')">
							确认支付</el-button>
					</div>
				</el-dialog>
			</el-tab-pane>


			<!-- //未支付 -------------------------------------------------------------------------------->
			<el-tab-pane label="未支付">
				<el-form :inline="true" :model="formInline" class="user-search">
					<div class="block">
						<el-date-picker v-model="formInline.start" type="date" placeholder="选择日期"
							format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
						</el-date-picker>
					</div>
					<div class="block">
						<el-date-picker v-model="formInline.end" type="date" placeholder="选择日期"
							format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
						</el-date-picker>
					</div>

					<el-form-item label="">
						<el-select v-model="editForm.service_status" placeholder="支付状态">
							<el-option v-for="item in levelOptions" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
					</el-form-item>

				</el-form>
				<!--列表-->
				<el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
					element-loading-text="拼命加载中" style="width: 80%;">
					<el-table-column align="center" type="selection" width="60">
					</el-table-column>
					<el-table-column sortable prop="month" label="时间" width="200">
					</el-table-column>
					<el-table-column sortable prop="money" label="服务费" width="200">
					</el-table-column>
					<el-table-column sortable prop="plan_time" label="截至支付时间" width="200">
					</el-table-column>
					<el-table-column sortable prop="pay_time" label="实际支付时间" width="200">
					</el-table-column>
					<el-table-column sortable prop="status" label="支付状态" width="200">
					</el-table-column>
					<el-table-column align="center" label="操作" min-width="200">
						<template slot-scope="scope">
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="danger">支付
							</el-button>
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页组件 -->
				<Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
				<el-dialog title="提示" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
					<el-form label-width="150px" :model="editForm" :rules="rules" ref="editForm">
						<el-form-item label="需要支付的服务费" prop="service">
							<el-input size="small" v-model="editForm.service" auto-complete="off" placeholder="需要支付的服务费"
								readonly>
							</el-input>
						</el-form-item>
						<el-form-item label="操作的金额" prop="money">
							<el-input size="small" v-model="editForm.money" auto-complete="off" placeholder="操作的金额"
								readonly>
							</el-input>

						</el-form-item>
						<el-form-item label="计划还款时间" prop="deadline">
							<el-input size="small" v-model="editForm.deadline" auto-complete="off" placeholder="计划还款时间"
								readonly>
							</el-input>

						</el-form-item>
						<el-form-item label="实际还款时间" prop="service">
							<el-input size="small" v-model="editForm.repay_time" auto-complete="off"
								placeholder="实际还款时间" readonly>
							</el-input>

						</el-form-item>
						<el-form-item label="支付状态" prop="service_status">
							<el-input size="small" v-model="editForm.service_status" auto-complete="off"
								placeholder="支付状态" readonly>
							</el-input>

						</el-form-item>
					</el-form>

					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
					</span>
				</el-dialog>
				<!-- 编辑界面 -->
				<el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
					<el-form label-width="150px" :model="editForm" :rules="rules" ref="editForm">
						<el-form-item label="需要支付的服务费" prop="money">
							<el-input size="small" v-model="editForm.money" auto-complete="off" placeholder="需要支付的服务费"
								readonly>
							</el-input>
						</el-form-item>
						<el-form-item label="支付密码" prop="password">
							<el-input placeholder="请输入密码" v-model="editForm.password" show-password></el-input>
							<span></span>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="closeDialog">取消</el-button>
						<el-button size="small" type="primary" :loading="loading" class="title"
							@click="submitForm('editForm')">
							确认支付</el-button>
					</div>
				</el-dialog>

			</el-tab-pane>

			<!-- //已支付 -------------------------------------------------------------------------------->
			<el-tab-pane label="已支付">
				<el-form :inline="true" :model="formInline" class="user-search">
					<div class="block">
						<el-date-picker v-model="formInline.start" type="date" placeholder="选择日期"
							format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
						</el-date-picker>
					</div>
					<div class="block">
						<el-date-picker v-model="formInline.end" type="date" placeholder="选择日期"
							format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
						</el-date-picker>
					</div>

					<el-form-item label="">
						<el-select v-model="editForm.service_status" placeholder="支付状态">
							<el-option v-for="item in levelOptions" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
					</el-form-item>

				</el-form>
				<!--列表-->
				<el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
					element-loading-text="拼命加载中" style="width: 80%;">
					<el-table-column align="center" type="selection" width="60">
					</el-table-column>
					<el-table-column sortable prop="month" label="时间" width="200">
					</el-table-column>
					<el-table-column sortable prop="money" label="服务费" width="200">
					</el-table-column>
					<el-table-column sortable prop="plan_time" label="截至支付时间" width="200">
					</el-table-column>
					<el-table-column sortable prop="pay_time" label="实际支付时间" width="200">
					</el-table-column>
					<el-table-column sortable prop="status" label="支付状态" width="200">
					</el-table-column>
					<el-table-column align="center" label="操作" min-width="200">
						<template slot-scope="scope">
							<el-button size="mini" @click="details(scope.$index, scope.row)">详情</el-button>
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页组件 -->
				<el-dialog title="提示" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
					<el-form label-width="150px" :model="editForm" :rules="rules" ref="editForm">
						<el-form-item label="需要支付的服务费" prop="service">
							<el-input size="small" v-model="editForm.service" auto-complete="off" placeholder="需要支付的服务费"
								readonly>
							</el-input>
						</el-form-item>
						<el-form-item label="操作的金额" prop="money">
							<el-input size="small" v-model="editForm.money" auto-complete="off" placeholder="操作的金额"
								readonly>
							</el-input>

						</el-form-item>
						<el-form-item label="计划还款时间" prop="deadline">
							<el-input size="small" v-model="editForm.deadline" auto-complete="off" placeholder="计划还款时间"
								readonly>
							</el-input>

						</el-form-item>
						<el-form-item label="实际还款时间" prop="service">
							<el-input size="small" v-model="editForm.repay_time" auto-complete="off"
								placeholder="实际还款时间" readonly>
							</el-input>

						</el-form-item>
						<el-form-item label="支付状态" prop="service_status">
							<el-input size="small" v-model="editForm.service_status" auto-complete="off"
								placeholder="支付状态" readonly>
							</el-input>

						</el-form-item>
					</el-form>

					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
					</span>
				</el-dialog>
				<Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
				<!-- 编辑界面 -->
				<el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
					<el-form label-width="150px" :model="editForm" :rules="rules" ref="editForm">
						<el-form-item label="需要支付的服务费" prop="money">
							<el-input size="small" v-model="editForm.money" auto-complete="off" placeholder="需要支付的服务费"
								readonly>
							</el-input>
						</el-form-item>
						<el-form-item label="支付密码" prop="password">
							<el-input placeholder="请输入密码" v-model="editForm.password" show-password></el-input>
							<span></span>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button size="small" @click="closeDialog">取消</el-button>
						<el-button size="small" type="primary" :loading="loading" class="title"
							@click="submitForm('editForm')">
							确认支付</el-button>
					</div>
				</el-dialog>
			</el-tab-pane>
		</el-tabs>
		<!-- 搜索筛选 -->

	</div>
</template>

<script>
	import {
		deptList,
		deptSave,
		deptDelete
	} from '../../api/userMG'
	import Pagination from '../../components/Pagination'
	import axios from '../../api/axiosFun.js'
	export default {
		data() {
			return {
				levelOptions: [{
						value: "已支付",
						label: "已支付",
					},
					{
						value: "未支付",
						label: "未支付",
					},
				],
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				show: false,
				dialogVisible: false, //详情页面
				nshow: true, //switch开启
				fshow: false, //switch关闭
				loading: false, //是显示加载
				editFormVisible: false, //控制支付页面显示与隐藏
				title: '添加',
				//账户类型
				editForm: {
					id: '',
					month: '',
					money: '',
					plan_time: '',
					eid: '',
					sid: "",
					pay_time: "",
					status: "",
					password:'',
				},
				pay: {
					password: '',
				},
				searcTime: {
					startTime: '',
					endTime: '',
					eid: '',
					service_status: '',
					currentPage: 1,
					pageSize: 5,
				},
				// rules表单验证
				rules: {
					deptName: [{
						required: true,
						message: '请输入部门名称',
						trigger: 'blur'
					}],
					deptNo: [{
						required: true,
						message: '请输入部门代码',
						trigger: 'blur'
					}]
				},
				formInline: {
					start: '',
					end: '',
					page: 1,
					limit: 5,
					varLable: '',
					varName: '',
					user: JSON.parse(localStorage.getItem("userdata")),
					token: localStorage.getItem('logintoken')
				},
				// 删除部门
				seletedata: {
					ids: '',
					token: localStorage.getItem('logintoken')
				},
				userparm: [], //搜索权限
				listData: [], //用户数据
				// 分页参数
				pageparm: {
					currentPage: 1,
					pageSize: 5,
					total: 10
				}
			}
		},
		// 注册组件
		components: {
			Pagination
		},
		/**
		 * 数据发生改变
		 */

		/**
		 * 创建完毕
		 */
		created() {
			this.getAll()
		},

		/**
		 * 里面的方法只有被调用才会执行
		 */
		methods: {
			//详情页面关闭
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},

			// 获取全部列表
			getAll() {
				this.loading = true
				this.$axios.post("api/settle/handlingFee/"+this.formInline.page+"/"+this.formInline.limit+"/"+this.formInline.user.enterprise_id)
					.then(res => {
						this.loading = false
						if (res.data.code == 500) {
							this.$message({
								type: 'info',
								message: res.data.msg
							})
						} else {
							console.log(res)
							this.listData = res.data.data.list

							// 分页赋值
							this.pageparm.currentPage = this.formInline.page
							this.pageparm.pageSize = this.formInline.limit
							this.pageparm.total = res.data.data.total

						}
					})
					.catch(err => {
						this.loading = false
						this.$message.error('菜单加载失败，请稍后再试！')
					}),
					this.$axios.post("api/settle/password/"+this.formInline.user.enterprise_id)
					.then(res => {
						if (res.data.code = 200) {

							this.editForm.password=res.data.data
							this.pay.password = res.data.data
						}
					})

			},
			show1(row) {
				if(row.status!='已支付'){
					return true
				}else{
					return false
				}
				
			},
			getdata(tab, event) {
				console.log(tab.index, event);

				/***
				 * 调用接口，注释上面模拟数据 取消下面注释
				 */
				/* this.$axios.get('/api/etmsUser/findStudentByTrain/' + this.formInline.currentPage + '/' + this.formInline
						.pageSize + '/' + this.tid)*/
				//全部
				if (tab.index == 0) {

					this.loading = true

					this.$axios.post("api/settle/handlingFee/"+this.formInline.page+"/"+this.formInline.limit+"/"+this.formInline.user.enterprise_id)
						.then(res => {
							this.loading = false
					
							if (res.data.code == 500) {
								this.$message({
									type: 'info',
									message: res.data.msg
								})
							} else {
								this.listData = res.data.data.list
								// 分页赋值
								this.pageparm.currentPage = this.formInline.page
								this.pageparm.pageSize = this.formInline.limit
								this.pageparm.total = res.data.data.total
							}
						})
						.catch(err => {
							this.loading = false
							this.$message.error('菜单加载失败，请稍后再试！')
						})
						


				}
				//未支付
				if (tab.index == 1) {
					this.loading = true
					this.$axios.post("api/settle/unpaid/"+this.formInline.page+"/"+this.formInline.limit+"/"+this.formInline.user.enterprise_id)
						.then(res => {
							this.loading = false
							
							if (res.data.code == 500) {
								this.$message({
									type: 'info',
									message: res.data.msg
								})
							} else {
								this.listData = res.data.data.list
								// 分页赋值
								this.pageparm.currentPage = this.formInline.page
								this.pageparm.pageSize = this.formInline.limit
								this.pageparm.total = res.data.data.total

							}
						})
						.catch(err => {
							this.loading = false
							this.$message.error('菜单加载失败，请稍后再试！')
						})
				}
				//已支付
				if (tab.index == 2) {
					this.loading = true
					this.$axios.post("api/settle/Paid/"+this.formInline.page+"/"+this.formInline.limit+"/"+this.formInline.user.enterprise_id)
						.then(res => {
							this.loading = false
							
							if (res.data.code == 500) {
								this.$message({
									type: 'info',
									message: res.data.msg
								})
							} else {
								this.listData = res.data.data.list
								// 分页赋值
								this.pageparm.currentPage = this.formInline.page
								this.pageparm.pageSize = this.formInline.limit
								this.pageparm.total = res.data.data.total
							}
						})
						.catch(err => {
							this.loading = false
							this.$message.error('菜单加载失败，请稍后再试！')
						})
				}

			},

			// 分页插件事件 

			callFather(parm) {
				this.formInline.page = parm.currentPage
				this.formInline.limit = parm.pageSize
				this.getdata(this.formInline)
			},
			// 搜索事件
			search() {
				this.searcTime.startTime = this.formInline.start
				this.searcTime.endTime = this.formInline.end
				this.searcTime.service_status = this.editForm.status
				this.searcTime.eid=this.formInline.user.enterprise_id
				console.log(this.searcTime)
				this.$axios.post("/api/settle/search", this.searcTime).then(res => {
					if (res.data.code == 200) {
						this.listData = res.data.data.list

						this.pageparm.currentPage = this.formInline.page
						this.pageparm.pageSize = this.formInline.limit
						this.pageparm.total = res.data.data.total
						
						this.formInline.start=''
						this.formInline.end=''
						this.editForm.status=''
					}
				}).catch()
			},
			//显示详情页面
			details: function(index, row) {
				this.dialogVisible = true
	
				this.title = '详情'
				this.editForm.service = row.service
				this.editForm.password = ''
				this.editForm.service_status = row.service_status
				this.editForm.deadline = row.deadline
				this.editForm.repay_time = row.repay_time
				this.editForm.money = row.money
				this.editForm.id = row.id
				this.editForm.enterprisid = row.enterprisid
				this.editForm.file_id = row.file_id

			},
			//显示支付界面
			handleEdit: function(index, row) {
				this.editFormVisible = true
	
				if (row != undefined && row != 'undefined') {
					this.title = '支付'
					this.editForm.money = row.money
					this.editForm.password = ''
					this.editForm.id = row.id
					this.editForm.ed = row.eid
				} else {

				}
			},
			submitForm(editData) {
				if (parseInt(this.pay.password) === parseInt(this.editForm.password)) {
					this.$axios.post("api/settle/status/"+this.formInline.user.enterprise_id+"/" + this.editForm.sid).then(res => {
						this.editFormVisible = false
						this.loading = false
					}).catch(this.$message.success("支付成功"))
				} else {
					this.loading = false
					this.$message.error('密码错误，请再试！')
				}
			},
			
			// 关闭编辑、增加弹出框
			closeDialog() {
				this.editFormVisible = false
			}
		}
	}
</script>

<style scoped>
	.user-search {
		margin-top: 20px;
	}

	.userRole {
		width: 100%;
	}
</style>
